<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../../ohter/js库/mock.js"></script>
  <script src="../../ohter/js库/vue.js"></script>
  <title>品优购首页</title>
  
  <!-- 引入初始化项目 -->
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="../shoping/css/index.css">
</head>
<!-- 
  seo优化


 -->
<body>
  <div id="root">
    <!-- 快捷导航模块 start -->
    <section class="shorcut">
      <div class="w">
        <div class="left">
         <ul>
          <li>品优购 欢迎您!&nbsp;</li>
          <li><a href="#">请登录</a> <a href="#"  class="style_red">&nbsp;免费注册</a></li>
         </ul>
        </div>
        <div class="right">
          <ul>
            <li><a href="#">我的订单</a></li>
            <li></li>
            <li class="arrow-icon"><a href="#">我的品优购</a></li>
            <li></li>
            <li><a href="#">品优购会员</a></li>
            <li></li>
            <li><a href="#">企业采购</a></li>
            <li></li>
            <li  class="arrow-icon"><a href="#">关注品优购</a></li>
            <li></li>
            <li  class="arrow-icon"><a href="#">客户服务</a></li>
            <li></li>
            <li  class="arrow-icon"><a href="#">网站导航</a></li>
          </ul>
        </div>
      </div>

    </section>
    <!-- 快捷导航模块 end -->
    <!-- header头部模块 start -->
    <header class="w header">
        <div class="logo">
          <h1  title="品优购">
            <a href="index.html">品优购</a>
          </h1>
        </div>
        <div class="search">
            <input type="search" placeholder="语言学习">
            <button>搜索</button>
        </div>
        <div class="list">
          <ul>
            <li><a href="#" style="color: #c81623;">优惠购首发</a></li>
            <li><a href="#">亿元优惠</a></li>
            <li><a href="#">9.9团购</a></li>
            <li><a href="#">每满99减30</a></li>
            <li><a href="#">办公用品</a></li>
            <li><a href="#">电脑</a></li>
            <li><a href="#">通信</a></li>
          </ul>
        </div>
        <div class="cart">
          
          <a href="#">我的购物车</a>
        </div>
    </header>
     <!-- header头部模块 end -->
     <div class="fenge"></div>
      <div class="zhuye w">
          <nav class="sidebar">
            <ul>
              <li><a href="#">家用电器</a></li>
              <li><a href="#">手机通信</a></li>
              <li><a href="#">电脑办公</a></li>
              <li><a href="#">家具家居</a></li>
              <li><a href="#">生活用品</a></li>
              <li><a href="#">运动户外</a></li>
              <li><a href="#">汽车用品</a></li>
              <li><a href="#">食品酒类</a></li>
              <li><a href="#">医疗保健</a></li>
              <li><a href="#">图书音像</a></li>
              <li><a href="#">金融彩票</a></li>
            </ul>
          </nav>
          
          <div class="nav">
            <h1>全部商品分类</h1>
            <ul>
              <li><a href="#">家用电器</a></li>
              <li><a href="#">手机,数码,通信</a></li>
              <li><a href="#">电脑,办公</a></li>
              <li><a href="#">家具,家具,家装,厨具</a></li>
              <li><a href="#">男装,女装,童装,内衣</a></li>
              <li><a href="#">个性化妆,清洁用品,宠物</a></li>
              <li><a href="#">鞋靴,箱包,珠宝,奢饰品</a></li>
              <li><a href="#">运动户外,钟表</a></li>
              <li><a href="#">汽车,汽车用品</a></li>
              <li><a href="#">母婴玩具乐器</a></li>
              <li><a href="#">食品,酒类,生鲜,特产</a></li>
              <li><a href="#">医疗保健</a></li>
              <li><a href="#">图书,音像,电子书</a></li>
              <li><a href="#">彩票,旅行,充值,服务</a></li>
              <li><a href="#">理财,众筹,白条,保险</a></li>
            </ul>
          </div>
          <div class="navbar">
            <ul>
              <li><a href="#">服装城</a></li>
              <li><a href="#">美妆馆</a></li>
              <li><a href="#">传智城市</a></li>
              <li><a href="#">全球购</a></li>
              <li><a href="#">闪购</a></li>
              <li><a href="#">团购</a></li>
              <li><a href="#">拍卖</a></li>
              <li><a href="#">有趣</a></li>
            </ul>
          </div>
          <div class="banner">
            <a href="#">
              <img src="../shoping/images/banner.png" alt="#" style="width: 100%;height: 100%;">
         
            </a>
            </div>
          <div class="ohter">
            <div class="top">
              <div class="title">
                <h1>品优购快报</h1>
                <a href="#"><span>更多</span></a>
              </h1>
            </div>
          </div>
      </div>

  </div>
</body>
<script>
  new Vue({
    el: '#root',
    data() {
      return {
      }
    },
  })
</script>

</html>